<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true, // 价格卡片标题
  },
  price: {
    type: [String, Number],
    required: true, // 价格
  },
  features: {
    type: Array,
    default: () => [], // 功能列表
  },
  level: {
    type: Number,
    default: 1, // 等级，1-5
    validator: (value) => value >= 1 && value <= 5, // 确保等级在1到5之间
  },
});
</script>

<template>
  <div
      class="card-pricing"
      :class="`level-${props.level}`"
  >
    <h3>{{ props.title }}</h3>
    <div class="price">
      <span class="currency">$</span>
      <span class="amount">{{ props.price }}</span>
      <span class="period">/月</span>
    </div>
    <ul class="features">
      <li v-for="(feature, index) in props.features" :key="index">
        {{ feature }}
      </li>
    </ul>
    <button class="btn">立即购买</button>
  </div>
</template>

<style scoped>
.card-pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 400px; /* 确保卡片高度一致 */
  flex: 1;
}

.card-pricing:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

h3 {
  margin: 0 0 10px;
  font-size: 24px;
  color: inherit; /* 继承父元素颜色 */
}

.price {
  margin: 20px 0;
  font-size: 36px;
  font-weight: bold;
  color: inherit; /* 继承父元素颜色 */
}

.currency {
  font-size: 24px;
}

.period {
  font-size: 16px;
  color: inherit; /* 继承父元素颜色 */
}

.features {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  text-align: center;
  flex-grow: 1; /* 功能列表占据剩余空间 */
}

.features li {
  margin: 10px 0;
  font-size: 14px;
  color: inherit; /* 继承父元素颜色 */
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #0056b3;
}

/* 等级1 */
.card-pricing.level-1 {
  background-color: #f0f4f8;
  color: #333;
}

.card-pricing.level-1 .btn {
  background-color: #007bff;
  color: white;
}

.card-pricing.level-1 .btn:hover {
  background-color: #0056b3;
}

/* 等级2 */
.card-pricing.level-2 {
  background-color: #e3f2fd;
  color: #1e88e5;
}

.card-pricing.level-2 .btn {
  background-color: #1e88e5;
  color: white;
}

.card-pricing.level-2 .btn:hover {
  background-color: #1565c0;
}

/* 等级3 */
.card-pricing.level-3 {
  background-color: #fff3e0;
  color: #fb8c00;
}

.card-pricing.level-3 .btn {
  background-color: #fb8c00;
  color: white;
}

.card-pricing.level-3 .btn:hover {
  background-color: #e65100;
}

/* 等级4 */
.card-pricing.level-4 {
  background-color: #fbe9e7;
  color: #e53935;
}

.card-pricing.level-4 .btn {
  background-color: #e53935;
  color: white;
}

.card-pricing.level-4 .btn:hover {
  background-color: #c62828;
}

/* 等级5 */
.card-pricing.level-5 {
  background-color: #fce4ec;
  color: #d81b60;
}

.card-pricing.level-5 .btn {
  background-color: #d81b60;
  color: white;
}

.card-pricing.level-5 .btn:hover {
  background-color: #ad1457;
}
</style>